body {
    /* 分页 */
    .bk-page.bk-page-small {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: -1px;
        border-top: 1px solid var(--borderColor);
        .bk-page-total-count-left,
        .bk-page-count {
            display: flex;
            align-items: center;
            margin-right: 10px;
            line-height: inherit;
            float: initial;
            .bk-select {
                margin: 0 10px;
            }
        }
        .bk-page-count {
            margin-right: auto;
        }
        .bk-page-list {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .page-item .page-button {
                height: 30px;
                min-width: 30px;
            }
        }
    }
    /* 表格 */
    .bk-table {
        /* 列边距 */
        .cell {
            padding: 0 10px;
        }
        /* 替换图标 */
        .bk-table-column-expand .bk-table-expand-icon .bk-icon {
            font-size: 20px;
            color: var(--fontSubsidiaryColor);
            margin: -10px 0 0 -10px;
            &:before {
                content: '\e107'
            }
        }
        /* 行高 */
        td, th {
            height: 40px;
            /* 列边距 */
            &:first-child > .cell {
                padding-left: 30px;
            }
            &:last-child > .cell {
                padding-right: 30px;
            }
            &.is-right .cell {
                padding-right: 30px;
            }
        }
        th {
            :hover {
                background-color: transparent;
            }
            > .cell {
                height: 40px;
                line-height: 40px;
            }
        }
        /* 行hover背景 */
        .bk-table-body tr.bk-table-row.hover-row > td {
            background-color: var(--bgLighterColor);
        }
        /* 流体布局适应 */
        .bk-table-body-wrapper {
            overflow-y: auto!important;
        }
        .bk-table-body,
        .bk-table-footer,
        .bk-table-header,
        .bk-table-empty-block {
            width: auto
        }
        .bk-table-empty-text {
            padding: 20px 0 100px;
        }
        .bk-table-column-selection .bk-form-checkbox .bk-checkbox {
            flex: initial
        }
    }
    /* 按钮 */
    .bk-button,
    .bk-button.no-slot {
        min-width: 56px;
        padding: 0 8px;
        height: 30px;
        line-height: initial;
        & > div {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bk-button-loading {
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .icon-plus {
            top: auto;
            margin: 0 -2px 0 -4px;
            font-size: 20px;
        }
        &.bk-default:not([disabled]):hover {
            border-color: var(--primaryColor);
            color: var(--primaryColor);
            background-color: var(--bgHoverLighterColor);
        }
    }
    .bk-button-text.bk-primary.hover,
    .bk-button-text.bk-primary:hover {
        color: var(--primaryWeightColor);
    }
    /* 面包屑 */
    .bk-breadcrumb .bk-breadcrumb-item {
        display: inline-flex;
        align-items: center;
        .bk-breadcrumb-separator {
            margin: 0;
            font-size: 20px;
        }
        .bk-breadcrumb-item-inner{
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        &:last-child .bk-breadcrumb-item-inner.is-link {
            cursor: initial;
        }
    }
    /* 字体颜色重置 */
    .bk-table,
    .bk-form .bk-label,
    .bk-form-checkbox .bk-checkbox-text,
    .bk-form-radio,
    .bk-tab-header,
    .bk-form-control,
    .bk-form-control .bk-limit-box .strong,
    .bk-form-control.control-active .bk-limit-box .strong,
    .bk-button,
    .bk-select,
    .bk-sideslider-title,
    .bk-breadcrumb-item-inner.is-link,
    .bk-select-dropdown-content,
    .bk-options .bk-option.is-highlight,
    .bk-options .bk-option:hover {
        color: var(--fontPrimaryColor);
    }
    .bk-form-input,
    .bk-form-password,
    .bk-form-select,
    .bk-form-textarea {
        height: 30px;
    }

    .bk-select .bk-select-name {
        height: 28px;
        line-height: 28px;
    }

    .bk-options.bk-options-single .bk-option.is-selected {
        background-color: var(--bgLightColor);
    }

    .bk-options.bk-options-single .bk-option.is-highlight,
    .bk-options.bk-options-single .bk-option:hover {
        background-color: var(--bgHoverLighterColor);
    }

    .bk-form-control .bk-limit-box,
    .bk-form-control.control-active .bk-limit-box,
    .bk-select .bk-select-angle,
    .bk-select .bk-select-clear,
    .bk-select .bk-select-clear:hover,
    .bk-form-control .control-icon .clear-icon,
    .bk-tag-selector .bk-tag-input .clear-icon,
    .bk-form-control .control-icon .clear-icon:hover,
    .bk-tag-selector .bk-tag-input .clear-icon:hover {
        color: var(--fontDisableColor);
    }
    ::placeholder {
        color: var(--fontDisableColor)!important;
    }

    .bk-breadcrumb .bk-breadcrumb-item:last-child .bk-breadcrumb-item-inner.is-link,
    .bk-page .bk-page-total-count,
    .bk-page .bk-page-total-count .stress,
    .bk-page .bk-page-count-left,
    .bk-table th .bk-table-header-label,
    .bk-form-radio-button .bk-radio-button-text {
        color: var(--fontSubsidiaryColor);
    }
    /* 字体大小重置 */
    .bk-form .bk-label,
    .bk-form-checkbox .bk-checkbox-text,
    .bk-breadcrumb,
    .bk-button,
    .bk-button-text,
    .bk-form-radio {
        font-size: 12px;
    }
    .bk-sideslider-title {
        font-size: 14px;
    }
    /* 边框颜色重置 */
    .bk-table:before {
        background-color: var(--borderColor);
    }
    .bk-table td,
    .bk-table th.is-leaf {
        border-color: var(--borderColor);
    }
    .bk-form-input,
    .bk-form-control .group-box,
    .bk-form-password,
    .bk-form-select,
    .bk-form-textarea,
    .bk-textarea-wrapper,
    .bk-select,
    .bk-button,
    .bk-form-checkbox .bk-checkbox,
    .bk-tag-selector .bk-tag-input,
    .bk-form-radio input[type=radio] {
        border-color: var(--borderWeightColor);
    }

    .bk-form-radio:focus input[type=radio],
    .bk-form-radio-button:focus {
        box-shadow: none;
    }
    .bk-form-radio input[type=radio] {
        width: 14px;
        height: 14px;
        &:not([disabled], .is-checked):hover {
            background-color: var(--bgHoverLighterColor);
            border-color: var(--primaryColor);
        }
        &:not([disabled]).is-checked {
            background-color: white;
            border: 4px solid var(--primaryColor);
        }
        &:is([disabled]).is-checked {
            border: 4px solid var(--borderWeightColor);
        }
    }
    .bk-form-checkbox {
        display: inline-flex;
        align-items: center;
        line-height: inherit;
        .bk-checkbox {
            width: 14px;
            height: 14px;
        }
        &.is-checked .bk-checkbox:after {
            top: -1px;
            left: 3px;
        }
        &.is-indeterminate:not(.is-checked) .bk-checkbox {
            border-color: var(--borderWeightColor);
            background-color: white;
            &:after {
                width: 6px;
                height: 6px;
                margin-left: -3px;
                margin-top: -3px;
                border-radius: initial;
                background-color: var(--primaryColor);
            }
        }
        &:not(.is-disabled, .is-checked, .is-indeterminate):hover .bk-checkbox {
            background-color: var(--bgHoverLighterColor);
            border-color: var(--primaryColor);
        }
    }

    .bk-tab-label-wrapper .bk-tab-label-list {
        &.bk-tab-label-list-has-bar:after {
            margin-left: 8px;
            width: calc(var(--activeBarWidth) - 16px);
        }
        .bk-tab-label-item {
            min-width: initial;
            padding: 0 20px;
            &.active .bk-tab-label {
                font-weight: bold;
            }
        }
    }

    .bk-option-name {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bk-sideslider {
        .bk-sideslider-header {
            display: flex;
            align-items: center;
            .bk-sideslider-closer {
                float: none;
            }
            .bk-sideslider-title {
                flex: 1;
                padding: 0 20px!important;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
        .bk-sideslider-content {
            height: calc(100% - 60px);
            overflow: hidden;
        }
    }

    .bk-tag-selector{
        .bk-tag-input {
            height: 32px;
            .tag-list {
                float: none;
                height: 100%;
                overflow-y: hidden;
                .key-node {
                    background-color: transparent;
                    border-color: transparent;
                    .tag {
                        color: var(--primaryColor);
                        background-color: var(--bgLightColor);
                        &:hover {
                            background-color: var(--bgHoverLighterColor);
                        }
                    }
                }
            }
            .clear-icon {
                position: absolute;
                right: 0;
            }
        }
    }

    .bk-select-tag-container {
        &.is-small-size .bk-select-tag {
            line-height: 20px;
        }
        &.is-available {
            .bk-select-tag {
                color: var(--primaryColor);
                background-color: var(--bgLightColor);
                &:hover {
                    background-color: var(--bgHoverLighterColor);
                }
            }
        }
    }

    .bk-switcher {
        background-color: var(--fontSubsidiaryColor);
    }

    .bk-transfer {
        .source-list,
        .target-list {
            display: flex;
            flex-direction: column;
            .header {
                color: var(--fontPrimaryColor);
                span.disabled {
                    color: var(--fontDisableColor);
                }
            }
            .transfer-search-input {
                width: initial;
                margin: 15px 10px;
                border: 1px solid var(--borderWeightColor);
                border-radius: 2px;
                line-height: initial;
                &:focus-within {
                    border-color: var(--primaryColor);
                }
                .bk-form-input {
                    line-height: initial;
                }
            }
            .content {
                max-height: initial;
                margin: initial;
                li {
                    padding: 0 10px 0 20px;
                    color: var(--fontPrimaryColor);
                    font-size: 12px;
                    // todo
                    > div > .bk-icon {
                        visibility: hidden;
                    }
                    &:hover .bk-icon {
                        visibility: visible;
                    }
                }
                .bk-select {
                    .icon-close-circle-shape {
                        font-size: 14px;
                    }
                    .icon-angle-down {
                        font-size: 22px;
                    }
                    .icon-close {
                        font-size: 18px;
                    }
                }
            }
            .empty {
                font-size: 12px;
                color: var(--fontDisableColor);
            }
        }
    }

    .bk-form {
        .bk-form-item {
            .bk-label {
                padding-right: 20px;
            }
        }
    }

    .bk-select-dropdown-content {
        .bk-select-search-wrapper {
            margin: 15px 10px;
            border: 1px solid var(--borderWeightColor);
            border-radius: 2px;
            line-height: initial;
            &:focus-within {
                border-color: var(--primaryColor);
            }
            .bk-select-search-input {
                height: 30px;
                border-bottom: 0 none;
            }
        }
        .bk-options .bk-option:first-child {
            margin-top: 0;
        }
        &.show-select-all {
            .bk-option:first-child {
                .bk-option-name {
                    text-align: right;
                }
                &:hover {
                    background-color: transparent;
                }
            }
        }
    }

    .bk-date-picker {
        .bk-date-picker-rel {
            .icon-wrapper {
                width: 30px;
                height: 30px;
            }
            .bk-date-picker-editor {
                height: 30px;
                line-height: 30px;
                color: var(--fontPrimaryColor);
                border-color: var(--borderWeightColor);
            }
            .bk-icon {
                color: var(--fontDisableColor);
            }
        }
    }
    .bk-date-picker-dropdown {
        margin-top: 6px;
        padding: 0;
        .bk-picker-panel-body-wrapper {
            .bk-picker-panel-body {
                &:not(.bk-picker-panel-body-date) {
                    width: 286px!important;
                }
                .bk-picker-panel-content-left {
                    border-right: 1px solid var(--borderColor);
                }
                :is(.bk-date-picker-header, .bk-time-picker-header) {
                    padding: 0 20px;
                    color: var(--fontPrimaryColor);
                    .bk-picker-panel-icon-btn .bk-icon {
                        color: var(--fontSubsidiaryColor);
                        &:hover {
                            color: var(--primaryColor);
                            background-color: var(--bgHoverLighterColor);
                        }
                    }
                }
                .bk-picker-panel-content {
                    .bk-date-picker-cells:not(.bk-date-picker-cells-month span, .bk-date-picker-cells-year span) {
                        margin: 9px 20px;
                        color: var(--fontPrimaryColor);
                        span {
                            color: var(--fontPrimaryColor);
                        }
                        &:not(.bk-date-picker-cells-year, .bk-date-picker-cells-month) span {
                            width: 35px;
                            margin: 5px 0;
                        }
                        .bk-date-picker-cells-header span {
                            height: 30px;
                            line-height: 30px;
                        }
                        .bk-date-picker-cells-cell {
                            height: 35px;
                            line-height: 35px;
                            em {
                                width: 100%;
                                height: 100%;
                                line-height: inherit;
                            }
                            &:not(
                                .bk-date-picker-cells-cell-prev-month,
                                .bk-date-picker-cells-cell-next-month,
                                .bk-date-picker-cells-cell-selected,
                                .bk-date-picker-cells-cell-disabled
                            ):hover em {
                                background-color: var(--bgHoverLighterColor);
                            }
                            &:is(.bk-date-picker-cells-cell-prev-month, .bk-date-picker-cells-cell-next-month) em {
                                color: var(--fontSubsidiaryColor);
                            }
                            &.bk-date-picker-cells-cell-range:before {
                                background-color: var(--primaryColor);
                                opacity: 0.1;
                                z-index: 2;
                            }
                            &.bk-date-picker-cells-cell-selected em {
                                border-radius: 2px;
                            }
                            &.bk-date-picker-cells-cell-today em {
                                box-shadow: none;
                            }
                            &.bk-date-picker-cells-cell-today:not(.bk-date-picker-cells-cell-selected) em {
                                color: var(--fontPrimaryColor);
                            }
                        }
                    }
                    .bk-time-picker-cells {
                        .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title {
                            color: var(--fontPrimaryColor);
                        }
                        .bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell {
                            color: var(--fontPrimaryColor);
                            &.bk-time-picker-cells-cell-disabled {
                                color: var(--fontDisableColor);
                            }
                        }
                    }
                }
                .bk-picker-confirm a {
                    font-size: 12px;
                    color: var(--fontSubsidiaryColor);
                    &:is(.bk-picker-confirm-time, .confirm) {
                        color: var(--primaryColor);
                    }
                }
            }
            &.bk-date-picker-with-range .bk-picker-panel-body {
                min-width: 572px;
                :is(.bk-picker-panel-content-left, .bk-picker-panel-content-right) {
                    width: 286px!important;
                }
            }
        }
    }

    .bk-message {
        min-width: 220px;
        padding: 10px 16px;
        .bk-message-icon {
            margin-right: 4px;
        }
        .bk-message-content {
            min-width: initial;
            max-width: 512px;
        }
        .bk-message-close .bk-icon {
            color: var(--fontSubsidiaryColor);
        }
        &.bk-message-success {
            background-color: var(--successBgColor);
            .bk-message-content {
                color: var(--successColor);
            }
        }
        &.bk-message-error {
            background-color: var(--dangerBgColor);
            .bk-message-content {
                color: var(--dangerColor);
            }
        }
    }

    .bk-dialog-wrapper {
        .bk-dialog-body {
            font-size: 12px;
            min-height: 148px;
            color: var(--fontPrimaryColor);
        }
        .bk-dialog-footer {
            padding: 15px 20px;
        }
    }
}

ul {
    border: 0 none!important;
}
